<template>
  <div class="Status">
    <div class="page-head">
      <div class="page-title">设备状态</div>
      <div class="page-tool">
        <el-select
          v-model="status"
          placeholder="在线状态筛选"
          class="tool-sel"
          clearable
        >
          <el-option
            v-for="item in onlineStatus"
            :key="item.key"
            :label="item.value"
            :value="item.key">
          </el-option>
        </el-select>
        <el-select
          v-if="false"
          placeholder="异常状态筛选"
          class="tool-sel"
          clearable
        >
          
        </el-select>
      </div>
    </div>
    <div class="page-body page-wrap">
      <div class="left_panel">
        <div class="num-box">
          <div class="num-item">
            <div class="num">
              {{stat.total}}
            </div>
            <div class="label">
              设备总数
            </div>
          </div>
          <div class="num-item error">
            <div class="num"> 
              {{stat.offline}}
            </div>
            <div class="label">
              异常设备
            </div>
          </div>
        </div>
        <chart-box v-if="Object.keys(stat).length" id="online" :stat="stat" upTxt="在线" downTxt="离线" inTxt="设备在线率" />
        <!-- <chart-box id="offline" :upNum="0" :downNum="0" upTxt="正常" downTxt="异常" inTxt="设备健康率" /> -->
      </div>

      <div class="right_table">
        <div class="table_data">
          <el-table :data="tableData" stripe border :fit="true" :height="$tableHeight">
            <el-table-column
              prop="alias"
              label="设备名称"
            >
            </el-table-column>
            <el-table-column
              prop="cnc_id"
              width="80"
              label="CNC ID"
            >
            </el-table-column>
            <el-table-column
              width="80"
              prop="floor"
              label="楼层"
            >
            </el-table-column>
            <el-table-column
              prop="branch"
              width="80"
              label="车间"
            >
            </el-table-column>
            <el-table-column
              width="80"
              prop="line"
              label="条线"
            >
            </el-table-column>
            <el-table-column
              prop="seq"
              label="序号"
            >
            </el-table-column>
            <el-table-column
              prop="serial"
              label="设备识别号"
            >
            </el-table-column>
            <el-table-column
              prop="group_name"
              label="所属分组"
            >
            </el-table-column>
            <el-table-column
              width="80"
              prop="version"
              label="当前版本"
            >
            </el-table-column>
            <el-table-column label="在线状态" align="center" prop="status">
              <template slot-scope="{ row }">
                <div class="status-btn" :class="onlineStatus.find(s => s.key == row.status).className">
                  {{onlineStatus.find(s => s.key == row.status).value}}
                </div>
              </template>
            </el-table-column>
            <el-table-column v-if="false" label="数据接收状态" align="center" prop="status">
              <template slot-scope="{ row }">

              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="{ row }">
                <div class="operation-col">
                  <div
                    class="txt-btn"
                    @click="toDetail(row)"
                  >
                    <el-tooltip effect="dark" content="查看详情" placement="top-start">
                      <img src="~assets/img/detail.png" alt="">
                    </el-tooltip>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page-footer">
          <pagina-tion
            class="page-pager"
            v-show="total >= 0"
            :background="true"
            :total="total"
            :offset.sync="offset"
            :limit.sync="limit"
            @pagination="getChangePage"
            @sizeChange="getSizePage"
          />
        </div>
      </div>
      
    </div>

  </div>
</template>

<script>
import * as api from "@/api";
import { limit, smallLimit } from "@/consts/consts";
import { onlineStatus } from "@/consts/codesMap";
import chartBox from "@/components/views/status/chartBox";
import paginaTion from "@/components/libs/paginaTion";


export default {
  components:{
    chartBox,
    paginaTion
  },
  data() {
    return {
      status: '',
      onlineStatus,
      limit,
      total: 0,
      offset: 0,
      tableData: [],
      stat: {
        
      }
      
    };
  },
  computed: {

  },
  watch: {
    status() {
      this.getList()
    }
  },
  methods: {
    getChangePage(val) {
      sessionStorage.setItem('statusCurPage', val.offset)
      this.offset = val.offset
      this.getList()
    },

    getSizePage(val) {
      this.offset = 0
      this.getList();
    },

    toDetail(row) {
      this.$router.push({
        name: 'detail',
        query: {
          hub_id: row.hub_id,
          serial: row.serial
        }
      })
    },

    async statusStat() {
      const { code, data } = await api.status(this).statusStat()
      if (code === 0) {
        this.stat = data
      }
    },
    
    // 列表
    async getList() {
      const { code, data, total } = await api.status(this).getList({
        offset: this.offset,
        limit: this.limit,
        status: this.status,
      });
      if (code === 0) {
        this.tableData = data
        this.total = total
      }
    },

  },
  created() {
    let curPage = sessionStorage.getItem('statusCurPage')
    this.offset = +curPage
    this.statusStat()
    this.getList()
  },
};
</script>

<style lang="stylus">
.Status {

}

</style>